<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS内容</title>
    <style type="text/css">
        *{padding: 0 2px;margin: 2px;}
        li{
            list-style-type: none;
        }
        .string p:after{
            background-color: #fff;
            content: "这是插入的文本内容";
            color: #f00;
        }
        .attr p:after{
            content: attr(title);
            color: #f00;
        }
        .url p:before{
            content: url("../source/img/w3c_home.png");
        }
        .l1 li{counter-increment: ci1 2;}
        .l1 li:before{
            content: "第"counter(ci1)".";
            color: #f00;
            padding-right:3px ;
        }
        .l2 li{counter-increment: ci2;}
        .l2 li:before{
            content: open-quote counter(ci2,lower-roman) close-quote;
            color: #f00;
            padding-right:3px ;
        }
        .l2 li{quotes: "("")"}
        .l3 li{counter-increment: ci3;}
        .l3 li:before{
            content: counter(ci3,decimal)".";
            color: #f00;
            padding-right:3px ;
        }
        .l3 li li{counter-increment: ci4;}
        .l3 li li:before{
            content: counter(ci3,decimal)"."counter(ci4,decimal)".";
        }
        .l3 li li li{counter-increment: ci5;}
        .l3 li li li:before{
            content:counter(ci3,decimal)"."counter(ci4,decimal)"." counter(ci5,decimal)".";
        }
    </style>
</head>
<body>
<ul>
    <li class="string">
        <h3>string</h3>
        <p>CSS内容属性：before及：after伪元素配合使用，来插入生成内容</p>
    </li>
    <li class="attr">
        <h3>attr</h3>
        <p title="这是个提示">获取段落的提示信息</p>
    </li>
    <li class="url">
        <h3>url()</h3>
        <p>插入外部资源</p>
    </li>
    <li class="l1">
        <h3>counter(name)</h3>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li class="l2">
        <h3>counter(name,list-style-type)</h3>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li class="l3">
        <h3>综合应用</h3>
        <ol>
            <li>列表项
                <ol>
                    <li>列表项
                        <ol>
                            <li>列表项</li>
                            <li>列表项</li>
                        </ol>
                    </li>
                    <li>列表项</li>
                </ol>
            </li>
            <li>列表项
                        <ol>
                            <li>列表项</li>
                            <li>列表项</li>
                        </ol>
            </li>
            <li>列表项
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
            </li>
        </ol>
    </li>
</ul>
</body>
</html>